<template>
  <div class="home">
    <!-- header -->
    <my-header></my-header>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white" :speed="200" :auto="3000" :continuous="true" :defaultIndex="1">
      <van-swipe-item @click="jumpDetail(t.gid)" v-for="(t, i) of swipeList" :key="i">
        <img :src="t.imageUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 定制旅行 -->
    <div class="custom-info">
      <router-link tag="div" to="/custom">
        <div class="title">
          <div>了解定制旅行</div>
          <van-icon name="arrow" />
        </div>
      </router-link>
      <div class="subtitle">好的订制,可以不贵</div>
      <div class="intro">
        <div class="intro-item">
          <img src="../assets/home/profession.png" alt="" />
          <div>专业定制师</div>
        </div>
        <div class="intro-item">
          <img src="../assets/home/consultant.png" alt="" />
          <div>1v1旅行顾问</div>
        </div>
        <div class="intro-item">
          <img src="../assets/home/guideAPP.png" alt="" />
          <div>专属路书&App</div>
        </div>
        <div class="intro-item">
          <img src="../assets/home/24h.png" alt="" />
          <div>24h出行保障</div>
        </div>
      </div>
    </div>
    <!-- 毕业精选 -->
    <div class="graduation">
      <div class="title">毕业精选</div>
      <div class="subtitle">一路涉足,一路留恋,一路回望.依旧前行!</div>
      <div class="card">
        <div class="card-list">
          <router-link tag="div" v-for="(item, i) of choiceLsit" :key="i" :to="`/tourMdetails/${item.gid}`" class="card-item">
            <img :src="item.main_img" alt="" style="width: 240px" />
            <div class="good-msg">
              <div class="good-title">{{ item.title }}</div>
              <div class="good-price">
                <span class="rmb-symbol">¥</span>
                <span class="rmb-price">{{ item.price }}</span>
                <span>/人起</span>
                <span class="count">{{ item.buy_count }}人已购买</span>
              </div>
            </div>
          </router-link>
        </div>
        <router-link tag="div" to="/travelMall" class="more">查看更多路线...</router-link>
      </div>
    </div>
    <!-- 和你去看海 -->
    <div class="ocean">
      <div class="title">和你去看海</div>
      <div class="subtitle">从不同的角度看向大海,可以得到不同的感受</div>
      <div class="card">
        <div class="card-list">
          <router-link tag="div" v-for="(item, i) of oceanList" :key="i" :to="`/tourMdetails/${item.gid}`" class="card-item">
            <img :src="item.main_img" alt="" style="width: 240px" />
            <div class="good-msg">
              <div class="good-title">{{ item.title }}</div>
              <div class="good-price">
                <span class="rmb-symbol">¥</span>
                <span class="rmb-price">{{ item.price }}</span>
                <span>/人起</span>
                <span class="count">{{ item.buy_count }}人已购买</span>
              </div>
            </div>
          </router-link>
        </div>
        <router-link tag="div" to="/travelMall" class="more">查看更多路线...</router-link>
      </div>
    </div>
    <!-- 扫货圣地 -->
    <div class="shopping">
      <div class="title">扫货圣地</div>
      <div class="subtitle">任性,任意消费,都有赚头</div>
      <div class="card">
        <div class="card-list">
          <router-link tag="div" v-for="(item, i) of shoppingList" :key="i" :to="`/tourMdetails/${item.gid}`" class="card-item">
            <img :src="item.main_img" alt="" style="width: 240px" />
            <div class="good-msg">
              <div class="good-title">{{ item.title }}</div>
              <div class="good-price">
                <span class="rmb-symbol">¥</span>
                <span class="rmb-price">{{ item.price }}</span>
                <span>/人起</span>
                <span class="count">{{ item.buy_count }}人已购买</span>
              </div>
            </div>
          </router-link>
        </div>
        <router-link tag="div" to="/travelMall" class="more">查看更多路线...</router-link>
      </div>
    </div>
    <!-- 订制路线组件 -->
    <my-custom></my-custom>
    <!-- 页脚组件 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
// 引入首页模块API
import { getCarousel, getChoice, getOcean, getShopping } from '../server/home.js'

export default {
  data() {
    return {
      swipeList: [], // 保存轮播图
      choiceLsit: [], // 精选商品
      oceanList: [], // 和你去看海
      shoppingList: [] // 扫货圣地
    }
  },
  async mounted() {
    // 加载中
    this.$toast.loading({
      message: '加载中...',
      duration: 0,
      forbidClick: true
    })
    // 获取轮播图
    await getCarousel().then(result => (this.swipeList = result))
    // 获取精选
    await getChoice().then(result => (this.choiceLsit = result))
    // 获取和你去看海
    await getOcean().then(result => (this.oceanList = result))
    // 获取扫货商品
    await getShopping().then(result => (this.shoppingList = result))
    // 所有数据加载完毕后关闭toast
    this.$toast.clear()
  },
  methods: {
    // 点击轮播图或推荐商品跳转指定商品详情
    jumpDetail(id) {
      this.$router.push(`/tourMdetails/${id}`)
    }
  }
}
</script>
<style lang="scss">
@import './scss/home.scss';
</style>
